<template>
	<div class="aside">
		<div class="logo">
			Castle <br />
			Fortress
		</div>
		<div class="menu-main">
			<div
				:class="[
					'menu-item',
					{
						active: current === index,
					},
				]"
				v-for="(item, index) in menuList"
				:key="index + item.id"
				@click="onChangeMenu(index)"
			>
				<v-icon class="v-icon" :size="20" color="#fff" :name="item.icon"></v-icon>
				{{ item.title }}
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { LEFT_WIDTH } from "/store/setting/constants"
import { useMenuStore } from "/store/menu"

const menuStore = useMenuStore()

const width = LEFT_WIDTH + "px"
const current = computed({
	get: () => menuStore.nowCurrent,
	set: value => (menuStore.nowCurrent = value),
})
const menuList = computed(() => menuStore.menuList)

function onChangeMenu(index) {
	current.value = index
}
</script>

<style lang="scss" scoped>
.aside {
	background: var(--first-nav-background);
	color: #fff;
	width: v-bind(width);
	height: 100%;
	.logo {
		position: relative;
		z-index: 2;
		height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-weight: 700;
		font-size: 16px;
		letter-spacing: 2px;
		color: var(--el-color-primary);
	}
	.menu-main {
		overflow-y: auto;
		height: calc(100% - 48px);
	}
	.menu-item {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		font-size: 12px;
		height: 65px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		cursor: pointer;
		letter-spacing: 0.5px;
		transition: var(--transition);
		position: relative;
		z-index: 1;
		margin-top: 5px;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: -5px;
			width: 0;
			height: 0;
			margin: auto;
			z-index: 2;
			border-right: 5px solid #fff;
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			transition: var(--transition);
		}
		&::after {
			content: "";
			background: var(--first-nav-active-color);
			position: absolute;
			top: 0;
			bottom: 0;
			left: 5%;
			width: 86%;
			height: 100%;
			margin: auto;
			opacity: 0;
			border-radius: 5px;
			z-index: -1;
			transition: var(--transition);
		}
		&.active {
			&::after {
				opacity: 1;
			}
			&::before {
				right: 0;
			}
		}
		&:hover {
			&::after {
				opacity: 1;
			}
		}
		.v-icon {
			margin-bottom: 5px;
		}
	}
}
</style>
